<template>
    <div class="app-container">
        <el-form ref="queryParamsRef" :inline="true" :model="queryParams">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="调警单位" label-width="100px">
                        <el-tree-select v-model="queryParams.orderUnitId" :data="UnitOptions" default-expand-all
                            :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id"
                            placeholder="选择单位" check-strictly clearable @change="getBackPoliceLists"
                            style="width:300px" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="被调警单位" label-width="100px">
                        <el-tree-select v-model="queryParams.fromUnitId" :data="UnitOptions" default-expand-all
                            :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id"
                            placeholder="选择单位" check-strictly clearable @change="getBackPoliceLists"
                            style="width:300px" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="调往单位" label-width="100px">
                        <el-tree-select v-model="queryParams.toUnitId" :data="UnitOptions" default-expand-all
                            :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id"
                            placeholder="选择单位" check-strictly clearable @change="getBackPoliceLists"
                            style="width:300px" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="时间起止" label-width="100px">
                        <el-date-picker v-model="searchTime" type="daterange" range-separator="-"
                            start-placeholder="开始时间" end-placeholder="截止时间" value-format="YYYY-MM-DD"
                            @change="changeDateTimerHandle" style="width:300px" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item>
                        <el-button type="primary" @click="getBackPoliceLists">
                            <el-icon class="me-1">
                                <Search />
                            </el-icon>
                            查询
                        </el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="handleRest(queryParamsRef)">
                            <el-icon class="me-1">
                                <Refresh />
                            </el-icon>
                            重置
                        </el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-divider class="mt-0" />
        <el-table ref="SendPoliceTableRef" v-loading="loading" :data="SendPoliceTable"
            @selectionChange="selectChangeHandle"
            @row-dblclick="handleRowDblClick"
            stripe
            :row-style="tableRowStyle"
            show-overflow-tooltip border>
            <el-table-column label="调警单位" prop="order_unit_name" />
            <el-table-column label="被调单位" prop="from_unit_name" />
            <el-table-column label="调往单位" prop="to_unit_name" />

            <el-table-column label="男" prop="userman" />
            <el-table-column label="女" prop="userwoman" />
            <el-table-column label="集合时间" prop="userdate" width="160" />
            <el-table-column label="集合地点" prop="useraddress" width="120" />
            <el-table-column label="状态" prop="state">
                <template #default="scope">
                    <dict-tag :options="nj_orderpolice_status" :value="scope.row.state" />
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="160" align="center">
                <template #default="scope">
                    <el-button link size="small" type="warning" @click="backpeople(scope.row)"
                        v-if="scope.row.state == '3'">
                        <el-icon class="me-1">
                            <Avatar />
                        </el-icon>
                        返还人员
                    </el-button>
                    <el-button link size="small" type="primary"
                        @click="AddEditOrderPoliceRef.showEditOrderPolice(scope.row, '查看调警令信息', 'View',)">
                        <el-icon class="me-1">
                            <View />
                        </el-icon>
                        详情
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination v-show="total > 0" v-model:limit="paging.pageSize" v-model:page="paging.pageNum" :total="total"
            @pagination="getBackPoliceLists" />

        <!-- 用的就是派警申请的组件 只是组件名变了-->
        <AddEditOrderPolice ref="AddEditOrderPoliceRef" @getOrderPoliceList="getBackPoliceLists" />
    </div>

</template>

<script setup>
import PageHeader from "@/components/PageHeader/index.vue";
import { ElMessageBox } from 'element-plus'
import AddEditOrderPolice from "@/components/AddEditOrderPolice/AddEditOrderPolice.vue";
import { BackPoliceList, removeOrderPolice, BackPolice } from "@/api/OrderPolice/OrderPolice";
import { deptTreeSelectPost } from "@/api/system/user.js";
import { getCurrentInstance } from "vue";
import PageEnum from "@/enum/PageEnum.js";

const { proxy } = getCurrentInstance();
const { nj_sendpolice_type, nj_orderpolice_status, nj_anjian_type } = proxy.useDict('nj_sendpolice_type', 'nj_orderpolice_status', 'nj_anjian_type')

const queryParamsRef = ref()
const deleteStatus = ref(true)
const AddEditOrderPoliceRef = ref({})

const loading = ref(false)
const UnitOptions = ref([])
const searchTime = ref([])
const paging = ref({
    // 页码
    pageNum: 1,
    // 分页数量
    pageSize: PageEnum.SIZE
})
const queryParams = ref({
    state: '3'
})

const total = ref(0)
const SendPoliceTable = ref([])

onMounted(() => {
    getBackPoliceLists()
    getDeptTree()
})
// 斑马纹样式函数
const tableRowStyle = ({ row, rowIndex }) => {
    if (rowIndex % 2 === 0) {
        return { backgroundColor: '#e6ecff' }; // 偶数行背景色
    }
    return {}; // 奇数行默认透明
}
/** 查询部门下拉树结构 */
const getDeptTree = async () => {
    await deptTreeSelectPost({ isUnit: true }).then(res => {
        UnitOptions.value = res.data
    })
}
// 获取警务派警列表
const getBackPoliceLists = async () => {
    loading.value = true
    await BackPoliceList(queryParams.value, paging.value).then(res => {
        SendPoliceTable.value = res.rows
        total.value = res.total
        loading.value = false
    })
}
const selectChangeHandle = (data) => {
    deleteStatus.value = data.length === 0;
}
const handleRowDblClick = (row) => {
    AddEditOrderPoliceRef.value.showEditOrderPolice(row, '查看调警令信息', 'View',)
}
const deleteOrderPolice = async (row) => {
    ElMessageBox.confirm('此操作将取消本次任务所有派警,确认取消吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        removeOrderPolice(row.orderpolice_id).then(res => {
            getBackPoliceLists()
        })
    }).catch(() => {
    });
}
// 返还人员
const backpeople = async (row) => {
    ElMessageBox.confirm('确定要将人员返还到原单位吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        const data = {
            orderPoliceId: row.orderpolice_id
        }
        BackPolice(data).then(res => {
            getBackPoliceLists()
        })
    }).catch(() => {
    });
}
// 改变时间
const changeDateTimerHandle = (date) => {
    if (date) {
        queryParams.value = {
            ...queryParams.value,
            params: {
                beginTime: date[0],
                endTime: date[1]
            }
        }
    } else {
        queryParams.value = {
            ...queryParams.value,
            params: {
                beginTime: '',
                endTime: ''
            }
        }
    }
    getBackPoliceLists()
}
// 重置搜索调解
const handleRest = (formEl) => {
    queryParams.value = {
    }
    getBackPoliceLists()
}
</script>

<style lang="scss" scoped>
/* 保留斑马纹的同时添加悬停效果 */
:deep().el-table--striped .el-table__body tr.el-table__row--striped:hover td {
  background-color: #a5b8f4; /* 悬停时的红色 */
}

:deep().el-table__body tr:hover td {
  background-color: #a5b8f4; /* 悬停时的红色 */
}</style>